<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="袋型" prop="bagType">
          <el-radio-group v-model="formData.bagType" @change="handleBagTypeChange">
            <el-radio value="平口袋">平口袋</el-radio>
            <el-radio value="自粘袋">自粘袋</el-radio>
            <el-radio value="OPP卡头袋">OPP卡头袋</el-radio>
            <el-radio value="冲孔袋">冲孔袋</el-radio>
            <el-radio value="手提购物袋">手提购物袋</el-radio>
            <el-radio value="快递袋">快递袋</el-radio>
            <el-radio value="滑块拉链袋">滑块拉链袋</el-radio>
            <el-radio value="自封口袋">自封口袋</el-radio>
            <el-radio value="贴骨袋">贴骨袋</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 材质选择 -->
    <el-row v-if="showMaterial" :gutter="20">
      <el-col :span="12">
        <el-form-item label="材质" prop="material">
          <el-radio-group v-model="formData.material" @change="handleMaterialChange">
            <el-radio v-for="material in materialOptions" :key="material" :value="material">
              {{ material }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 快递袋颜色选择 -->
    <el-row v-if="formData.bagType === '快递袋'" :gutter="20">
      <el-col :span="12">
        <el-form-item label="颜色" prop="color">
          <el-radio-group v-model="formData.color" @change="handleColorChange">
            <el-radio value="外白内灰">外白内灰</el-radio>
            <el-radio value="全黑">全黑</el-radio>
            <el-radio value="全白">全白</el-radio>
            <el-radio value="其他颜色">其他颜色</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col v-if="formData.color === '其他颜色'" :span="12">
        <el-form-item label="自定义颜色" prop="customColor">
          <el-input v-model="formData.customColor" placeholder="请输入颜色" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">尺寸信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="宽度(mm)" prop="l">
          <el-input-number
            v-model="formData.l"
            :min="0"
            placeholder="宽度(mm)"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="长度(mm)" prop="w">
          <el-input-number
            v-model="formData.w"
            :min="0"
            placeholder="长度(mm)"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <!-- 胶条部分宽度 -->
      <el-col v-if="showAdhesiveWidth" :span="8">
        <el-form-item label="胶条宽度(mm)" prop="adhesiveWidth">
          <el-input-number
            v-model="formData.adhesiveWidth"
            :min="0"
            placeholder="胶条宽度(mm)"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <!-- 卡头宽度 -->
      <el-col v-if="formData.bagType === 'OPP卡头袋'" :span="8">
        <el-form-item label="卡头宽度(mm)" prop="cardWidth">
          <el-input-number
            v-model="formData.cardWidth"
            :min="0"
            placeholder="卡头宽度(mm)"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="厚度(丝)" prop="thickness">
          <el-input-number
            v-model="formData.thickness"
            :min="0"
            :disabled="formData.bagType === 'OPP卡头袋'"
            placeholder="厚度(丝)"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="其他规格" prop="remark2">
          <el-input
            v-model="formData.remark2"
            style="width: 100%"
            maxlength="2000"
            show-word-limit
            rows="4"
            type="textarea"
            placeholder="添加其他规格信息或者任意备注"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">印刷信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否印刷" prop="isPrint">
          <el-radio-group v-model="formData.isPrint" @change="handlePrintChange">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 印刷相关字段 -->
    <el-row v-if="formData.isPrint" :gutter="20">
      <el-col :span="12">
        <el-form-item label="印刷面" prop="printSide">
          <el-radio-group v-model="formData.printSide" @change="handlePrintSideChange">
            <el-radio value="单面">单面</el-radio>
            <el-radio value="双面">双面</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="印刷颜色数" prop="printColorCount">
          <el-input-number
            v-model="formData.printColorCount"
            :min="1"
            :max="8"
            placeholder="印刷颜色数"
            style="width: 100%"
            @change="handlePrintColorCountChange"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">数量信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="数量(个)" prop="quantity1">
          <QuantityInput v-model="formData.quantity1" placeholder="数量" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量2" prop="quantity2">
          <QuantityInput v-model="formData.quantity2" placeholder="数量2" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量3" prop="quantity3">
          <QuantityInput v-model="formData.quantity3" placeholder="数量3" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 订单信息：新增模式不显示重量和总价 -->
    <el-divider v-if="!isAddMode" content-position="left">订单信息</el-divider>
    <!-- 报价员模式在status=0,1时可以修改总价 -->
    <el-row
      v-if="
        !isAddMode &&
        isQuoteMode &&
        (formData.status === 0 || formData.status === 1 || formData.status === 3)
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="版费" prop="plateFee">
          <el-input-number
            v-model="formData.plateFee"
            :min="0"
            placeholder="版费"
            style="width: 500px"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他模式显示总价但不可编辑 -->
    <el-row
      v-if="
        !isAddMode &&
        (!isQuoteMode || (formData.status !== 0 && formData.status !== 1 && formData.status !== 3))
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="版费" prop="plateFee">
          <el-input-number
            v-model="formData.plateFee"
            :min="0"
            disabled
            placeholder="版费"
            style="width: 500px"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed, watch } from "vue";
import QuantityInput from "@/components/QuantityInput/index.vue";

defineOptions({
  name: "SingleLayerBag",
  inheritAttrs: false,
});

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  isAddMode: {
    type: Boolean,
    default: false,
  },
  isQuoteMode: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:formData"]);

// 根据袋型显示不同的材质选项
const materialOptions = computed(() => {
  const bagType = props.formData.bagType;

  if (bagType === "平口袋" || bagType === "自粘袋") {
    return ["高压PE", "低压PE", "OPP", "PP"];
  } else if (bagType === "冲孔袋" || bagType === "手提购物袋") {
    return ["高压PE", "低压PE"];
  } else if (bagType === "滑块拉链袋") {
    return ["透明PE", "磨砂PE", "EVA"];
  } else if (bagType === "自封口袋" || bagType === "贴骨袋") {
    return ["PE"];
  }

  return [];
});

// 是否显示材质选择
const showMaterial = computed(() => {
  return (
    props.formData.bagType &&
    props.formData.bagType !== "OPP卡头袋" &&
    props.formData.bagType !== "快递袋"
  );
});

// 是否显示胶条宽度
const showAdhesiveWidth = computed(() => {
  return (
    props.formData.bagType === "自粘袋" ||
    props.formData.bagType === "OPP卡头袋" ||
    props.formData.bagType === "快递袋"
  );
});

// 计算单价
const unitPrice1 = computed(() => {
  return props.formData.price1 && props.formData.quantity1
    ? props.formData.price1 / props.formData.quantity1
    : 0;
});

const unitPrice2 = computed(() => {
  return props.formData.price2 && props.formData.quantity2
    ? props.formData.price2 / props.formData.quantity2
    : 0;
});

const unitPrice3 = computed(() => {
  return props.formData.price3 && props.formData.quantity3
    ? props.formData.price3 / props.formData.quantity3
    : 0;
});

// 处理袋型变化
function handleBagTypeChange() {
  // 清空相关字段
  const updatedData = {
    ...props.formData,
    material: "",
    color: "",
    customColor: "",
    l: null,
    w: null,
    adhesiveWidth: null,
    cardWidth: null,
    thickness: props.formData.bagType === "OPP卡头袋" ? 4 : null,
    isPrint: false,
    printSide: "",
    printColorCount: null,
  };

  emit("update:formData", updatedData);
}

// 处理材质变化
function handleMaterialChange() {
  emit("update:formData", { ...props.formData });
}

// 处理颜色变化
function handleColorChange() {
  const updatedData = { ...props.formData };
  if (props.formData.color !== "其他颜色") {
    updatedData.customColor = "";
  }
  emit("update:formData", updatedData);
}

// 处理印刷变化
function handlePrintChange() {
  const updatedData = { ...props.formData };
  if (!props.formData.isPrint) {
    updatedData.printSide = "";
    updatedData.printColorCount = null;
    updatedData.surfaceFee = []; // 清空印刷费用
  } else {
    // 更新surfaceFee字段
    updateSurfaceFee(updatedData);
  }
  emit("update:formData", updatedData);
}

// 处理印刷面变化
function handlePrintSideChange() {
  const updatedData = { ...props.formData };
  updateSurfaceFee(updatedData);
  emit("update:formData", updatedData);
}

// 处理印刷颜色数变化
function handlePrintColorCountChange() {
  const updatedData = { ...props.formData };
  updateSurfaceFee(updatedData);
  emit("update:formData", updatedData);
}

// 更新surfaceFee字段（将印刷信息组合成逗号分隔的字符串）
function updateSurfaceFee(data) {
  if (!data.isPrint) {
    data.surfaceFee = [];
    return;
  }

  const surfaceInfo = [];

  // 添加是否印刷信息
  if (data.isPrint) {
    surfaceInfo.push("印刷");
  }

  // 添加印刷面信息
  if (data.printSide) {
    surfaceInfo.push(data.printSide);
  }

  // 添加印刷颜色数信息
  if (data.printColorCount) {
    surfaceInfo.push(`${data.printColorCount}色`);
  }

  data.surfaceFee = surfaceInfo;
}

// 监听OPP卡头袋的厚度设置
watch(
  () => props.formData.bagType,
  (newBagType) => {
    if (newBagType === "OPP卡头袋") {
      const updatedData = { ...props.formData, thickness: 4 };
      emit("update:formData", updatedData);
    }
  }
);
</script>

<style scoped>
.unit-price-display {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
</style>
